import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
import { useUserStore } from '@/stores'
import layout from '@/layout/index.vue'
import approval from './modules/approval'
import employee from './modules/employee'
import permission from './modules/permission'
import role from './modules/role'
import salary from './modules/salary'
import social from './modules/social'
import attendance from './modules/attendance'

// 静态路由
export const constantRoutes = [
  {
    path: '/login', //登录页
    component: () => import('@/views/login/index.vue'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/404.vue'),
    hidden: true
  },
  {
    path: '/',
    component: layout,
    redirect: '/dashboard',
    children: [
      {
        path: '/dashboard',
        name: 'dashboard',
        component: () => import('@/views/dashboard/Dashboard.vue'),
        meta: {
          title: '首页',
          icon: 'dashboard'
        }
      }
    ]
  },
  {
    path: '/department',
    name: '',
    component: layout, // 一级路由
    children: [
      {
        path: '', // 二级路由为空时 表示 /department 显示一级路由 + 二级路由
        component: () => import('@/views/department/Department.vue'),
        name: '',
        meta: {
          // 路由元信息，存储数据的
          icon: 'guide',
          title: '组织'
        }
      }
    ]
  }
  // 404必须放在最后
  // 经验2：在 Vue Router 4.x 中，通配符路由需要使用参数形式定义，并且必须提供一个自定义的正则表达式作为参数。这是为了提高路由匹配的性能
  // 使用参数形式定义通配符路由，并提供自定义的正则表达式
]

// 动态路由
export const asyncRoutes = [role, employee, permission, attendance, approval, salary, social]

//配置history模式
// 1. history模式：createWebHistory   地址栏不带#
// 2. hash模式： createWebHashHistory 地址栏带#，#后面的地址变化不会引起页面刷新

// console.log('路由中的输出:', import.meta.env.BASE_URL)
// vite 中的环境变量import.meta.env.BASE_URL  是 vite.config.js 中的base配置项
console.log(import.meta.env)
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: constantRoutes
})

console.log('路由初始化')

// 经验：第一次过滤的动态路由结果，不能用于刷新页面？反正，报错：Record with path "/xxx" is either missing a "component(s)" or "children" property.
export const refreshAsyncRouter = () => {
  const userStore = useUserStore()
  if (userStore.routes.length > 0) {
    asyncRoutes.forEach((item: any) => {
      // 经验： ？ 为可选链操作符，如果roles为空，返回undefined；否则返回值
      if (userStore.user.roles?.menus.includes(item.name)) {
        router.addRoute(item)
      }
    })
    router.addRoute({
      path: '/:catchAll(.*)',
      name: 'notFound',
      redirect: '/404'
    })
  }
}

export const resetRouter = () => {
  // 移除所有的路由
  router.getRoutes().forEach((route: any) => {
    // 检查路由是否存在
    if (route.name !== 'dashboard' && router.hasRoute(route.name)) {
      router.removeRoute(route.name)
    }
  })
}

export default router
